<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>分配角色</title>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
	<script type="text/javascript">
		let setting = {
			view: {selectedMulti:false,nameIsHTML:true,showTitle:false}
			,data:{simpleData:{enable:true}}
			,callback: {onClick: treeOnClick}
		};

		let officeNodes = [
			<c:forEach items="${officeList}" var="office">
				{id:"${office.id}", pId:"${not empty office.parent?office.parent.id:0}", name:"${office.name}"},
			</c:forEach>];

		let pre_selectedNodes = [
			<c:forEach items="${userList}" var="user">
				{id:"${user.id}", pId:"0", name:"${user.name}"},
			</c:forEach>];

		let selectedNodes = [
			<c:forEach items="${userList}" var="user">
				{id:"${user.id}", pId:"0", name:"${user.name}"},
			</c:forEach>];

		let pre_ids = "${selectIds}".split(",");
		let ids = "${selectIds}".split(",");

		// 初始化
		$(document).ready(function(){
			let _mainFrame = window.top.document.getElementById('mainFrame');
			const bodyHeight = $(_mainFrame).height();
			const headerHeight = $('.card-header').outerHeight(true) || 0;
			const footerHeight = $('#card-footer').outerHeight(true) || 0;
			const headersHeight = $('.card-header').outerHeight(true) || 0;
			const ztreePadding = parseInt($('.ztree').css('padding-top') || 0) + parseInt($('.ztree').css('padding-bottom') || 0);
			console.log(bodyHeight, headerHeight, footerHeight, headersHeight, ztreePadding);
			$('.ztree').height(bodyHeight - headerHeight - footerHeight - headersHeight - ztreePadding - 3);

			officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes);
			ztreeNodesExpand(true,officeTree,2,null,null);
			selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
		});
		//点击选择项回调
		function treeOnClick(event, treeId, treeNode, clickFlag){
			$.fn.zTree.getZTreeObj(treeId).expandNode(treeNode);
			if("officeTree"==treeId){
				$.get("${ctxAdmin}/sys/role/users?officeId=" + treeNode.id, function(userNodes){
					$.fn.zTree.init($("#userTree"), setting, userNodes);
				});
			}
			//console.log(treeNode.id + " | " + ids);
			//console.log(typeof ids[0] + " | " +  typeof treeNode.id);
			if("userTree"==treeId){
				if($.inArray(String(treeNode.id), ids)<0){
					selectedTree.addNodes(null, treeNode);
					ids.push(String(treeNode.id));
				}
			};
			if("selectedTree"==treeId){
				if($.inArray(String(treeNode.id), pre_ids)<0){
					selectedTree.removeNode(treeNode);
					ids.splice($.inArray(String(treeNode.id), ids), 1);
				}else{
					if(!confirm("确定要移除当前用户【"+ treeNode.name +"】吗？"))return false;
					location.href = ctxAdmin + "/sys/role/removeUser?id=${role.id}&userId=" + treeNode.id;
				}
			}
		};
		function assign(){
			if(ids[0]==''){
				ids.shift();
				pre_ids.shift();
			}
			if(pre_ids.sort().toString() == ids.sort().toString()){
				top.$.jBox.tip("未给角色【${role.name}】分配新成员！", 'info');
				return false;
			};
			// 执行保存
			let idsArr = "";
			for (let i = 0; i<ids.length; i++) {
				idsArr = (idsArr + ids[i]) + (((i + 1)== ids.length) ? '':',');
			}
			$("input[name='userIds']").val(idsArr);
			$('#inputForm').submit();
		}
	</script>
	<style>
		.ztree {overflow: auto;}
	</style>
</head>
<div class="card m-0">
	<sys:message content="${message}"/>
	<div id="card-header" class="card-header bg-transparent header-elements-inline p-2">
		<span>当前角色：${role.name}</span>
	</div>
	<div class="card-body p-0">
		<form id="inputForm"  class="d-none" method="post" action="${ctxAdmin}/sys/role/assignUser" >
			<input type="hidden" name="id" value="${role.id}"/>
			<input type="hidden" name="userIds"/>
		</form>
		<div class="row no-gutters">
			<div class="col-sm-4">
				<div class="card m-0 border-left-0 border-top-0 border-bottom-0">
					<div class="card-header bg-transparent header-elements-inline p-2 ">
						<span>所在部门</span>
					</div>
					<div class="card-body p-0">
						<div id="officeTree" class="ztree"></div>
					</div>

				</div>
			</div>
			<div class="col-sm-4">
				<div class="card m-0 border-left-0 border-top-0 border-bottom-0">
					<div class="card-header bg-transparent header-elements-inline p-2 ">
						<span>待选人员</span>
					</div>
					<div class="card-body p-0">
						<div id="userTree" class="ztree"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="card m-0 border-left-0 border-top-0 border-bottom-0">
					<div class="card-header bg-transparent header-elements-inline p-2">
						<span>已选人员</span>
					</div>
					<div class="card-body p-0">
						<div id="selectedTree" class="ztree"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="card-footer" class="card-footer bg-white d-flex">
		<div>通过选择部门，在待选人员中选择人员，点击保存按钮，将人员分配给角色。</div>
		<div class="ml-auto">
			<button type="button" class="btn btn-primary" onclick="assign()"><i class="icon-database-check mr-2"></i>保 存</button>
			<a class="btn btn-light" href="${ctxAdmin}/sys/role/"><i class="icon-database-arrow mr-2"></i>取 消</a>
		</div>
	</div>
</div>

</html>
